<template>
	<div class="container">
		<div class="login">
			<div class="title">系统登录</div>
			<div class="username">
				用户名:  &nbsp;&nbsp;<input v-if="loginForm.username" type="text" v-model="loginForm.username" placeholder="请输入用户名"/> </div>
			<br><br>
			<div class="pwd">
				密码：   &nbsp;&nbsp; <input type="password" v-if="loginForm.password" v-model="loginForm.password" placeholder="请输入密码"/>
			</div>      
			<br>
			<p class="rem"><input type="checkbox" />: 是否记住密码</p>
			
			<button class="loginbut" v-on:click="login">登录</button>
			
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data () {
		    return {
		        loginForm: {
		          username: '',
		          password: ''
		        },
		        responseResult: []
		      }
		    },
		methods: {
		  login () {
			this.$axios
			  .post('/login', {
				username: this.loginForm.username,
				password: this.loginForm.password
			  })
			  .then(successResponse => {
				if (successResponse.data.code === 200) {
				  this.$router.replace({path: '/index'})
				}
			  })
			  .catch(failResponse => {
			  })
			}
		}
		
	}
</script>

<style lang="less">
	.container{
		background:url(../assets/images/loginbg.jpg) no-repeat;
		// background-position: center;
		height: 102%;
		width: 102%;
		left: 0;
		top: 0;
		background-size: cover;
		position: fixed;
		.login{
			position: absolute;
			width: 25rem;
			height: 18rem;
			margin-top: 10%;
			left: 50%;
			padding: 20px;
			margin-left: -12.5rem;
			background-color: white;
			border: 1px solid #dceac6;
			box-shadow: 0 0 25px #fffee7;
			.title{
				font-size: 1.5rem;
				font-weight: bolder;
				color: #00556d;
				letter-spacing: 10px;
				margin-bottom: 30px;
			}
			.username .pwd{
				font-size: 1.125rem;
				// margin: 0 0 35px 0;
				input{
					// padding: 0 10px;
					margin-left: 0.625rem;
				}
			}
			.loginbut{
				margin-top: 5px;
				background-color: #94c369;
				color: white;
				width: 36%;
				height: 12%;
				border-radius: 20px;
				border-color: #cccccc;
			}
			.rem{
				font-size: 0.5rem;
				text-align: center;
			}
			
		}	
	}
	
</style>
